<template>
    <div>
        <el-dialog title="收款列表" :visible="visible" :close-on-click-modal="false"  :before-close="dialogClose" center>
            <el-table
                    :data="currentTableData"
                    v-loading="loading"
                    show-summary
                    :summary-method="getSummaries"
                    style="width: 100%;">
                <el-table-column label="ID" width="50" prop="id" />
                <el-table-column label="申请单ID" prop="couponApplyId" />
                <el-table-column label="收到金额"  prop="receiveAmount" />
                <el-table-column label="实际收到时间"  prop="receiveTime" />
                <el-table-column label="操作人"   prop="optionUserName" />
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogClose">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>

    export default {
        name: "page-main.vue",
        props: {
          couponApplyId: {
                type: Number
            },
            visible: {
                type: Boolean
            },
            loading: {
                default: false
            }
        },
        data(){
            return {
                currentTableData: [],
                curCouponApplyId:''
            }
        },
        watch: {
          couponApplyId: {
                handler (val) {
                    this.curCouponApplyId = val
                },
                immediate: true
            },
            visible(newVal){
                if(newVal){
                  this.fetchData();
                }
            }
        },
        created(){

        },
        methods:{
            dialogClose(){
                this.curCouponApplyId = '';
                this.$emit('dialog-close', true);
            },
            fetchData(){
              this.currentTableData = [];
                var paramsData = {
                        pageSize: 100,
                        pageNo: 1,
                        couponApplyId:this.curCouponApplyId
                }
                this.$api.couponApplyPaymentList(paramsData).then(res =>{
                    this.loading = false;
                    this.currentTableData = res.data.records;
                }).catch(err =>{
                    this.loading = false;
                })
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    } else if (index === 1){
                        sums[index] = '';
                        return;
                    }

                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            }
        }
    }
</script>


<style scoped>

</style>
